<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SLIDESHOW FUSUMA</title>
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../lib/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="../../js/ss_fusuma.js" type="text/javascript"></script>
<script src="../../js/rollover.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
//---ここではXMLを使わずJSONで指定します
var json = {
items:[
	{'url':'images/01.jpg','title':'01'},
	{'url':'images/02.jpg','title':'02','link':'http://www.yahoo.co.jp/'},
	{'url':'images/03.jpg','title':'03'},
	{'url':'images/04.jpg','title':'04','link':'http://www.google.co.jp/'},
	{'url':'images/05.jpg','title':'05'},
	{'url':'images/06.jpg','title':'06','link':'http://jp.msn.com/'},
	{'url':'images/07.jpg','title':'07'}//最後カンマなし
]};
var slideObj;
Event.observe(window,'load',function() {
	var option = {imageId:"container"};
	slideObj = new Fusuma(json,option); 
});
</script>
<style>
#container {
float:left;clear:none;
width:320px;height:200px;
background-color:black;
border-top:1px solid black;
border-bottom:1px solid black;
}
#prev, #next {
padding:0;margin:0;
float:left;clear:none;
width:20px;height:200px;
background-color:black;
border-top:1px solid black;
border-bottom:1px solid black;
}
#prev img, #next img {
border:0;
}
</style>
</head>
<body>

<div style="width:360px;height:202px;margin:30px;">
	<div id="prev">
	<a href="javascript:slideObj.prevSlide()"><img src="images/prev.gif" class="imgover"/></a>
	</div>
	<div id="container"></div>
	<div id="next">
	<a href="javascript:slideObj.nextSlide()"><img src="images/next.gif" class="imgover"/></a>
	</div>
</div>

</body>
</html>
